<template>
  <view class="content">
    <up-navbar title="会话" @rightClick="backClick" :autoBack="true">
    </up-navbar>
    <!-- 搜索框 -->
    <view class="search-box">
      <u-search
        v-model="keyword"
        placeholder="搜索课堂"
        @confirm="searchChat"
        shape="square"
        clearable
      ></u-search>
    </view>

    <!-- 会话列表 -->
    <view class="chat-list">
      <u-list border="none">
        <u-list-item
          v-for="(item, index) in filteredChats"
          :key="index"
          @click="goChatDetail(item.id)"
        >
          <view class="my-card">
            <view class="my-card-info">
              <up-avatar
                :src="item.teacherAvatar"
                class="my-card-info-cover"
                :width="128"
                :height="128"
              ></up-avatar>
              <view>
                <view class="my-card-info-title">{{ item.courseName }}</view>
                <view class="my-card-info-desc">{{
                  item.teacherName + ": " + item.lastMessage
                }}</view>
              </view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <my-tabbar :currentIndex="currentIndex"></my-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
      keyword: "",
      // 示例会话数据
      chats: [
        {
          id: 1,
          courseName: "前端开发实战",
          teacherAvatar: "https://picsum.photos/200/300?random=10",
          teacherName: "张教授",
          lastMessage:
            "明天记得提交作业。在实际项目中，你需要根据后端 API 返回的数据结构调整代码，特别是会话列表的数据格式。另外，会话详情页需要另外实现，可以使用 u-chat 组件来构建。",
          lastTime: "09:30",
          unreadCount: 3,
        },
        {
          id: 2,
          courseName: "Python数据分析",
          teacherAvatar: "https://picsum.photos/200/300?random=11",
          teacherName: "李老师",
          lastMessage: "数据分析项目进展如何？",
          lastTime: "昨天",
          unreadCount: 0,
        },
        {
          id: 3,
          courseName: "机器学习入门",
          teacherAvatar: "https://picsum.photos/200/300?random=12",
          teacherName: "王博士",
          lastMessage: "下周有一个学术讲座",
          lastTime: "周一",
          unreadCount: 5,
        },
        {
          id: 4,
          courseName: "UI/UX设计基础",
          teacherAvatar: "https://picsum.photos/200/300?random=13",
          teacherName: "陈设计师",
          lastMessage: "请查看新发布的设计资源",
          lastTime: "上周",
          unreadCount: 1,
        },
      ],
    };
  },
  computed: {
    // 过滤会话列表
    filteredChats() {
      if (!this.keyword.trim()) {
        return this.chats;
      }

      const keyword = this.keyword.trim().toLowerCase();
      return this.chats.filter((chat) => {
        return (
          chat.courseName.toLowerCase().includes(keyword) ||
          chat.lastMessage.toLowerCase().includes(keyword) ||
          chat.teacherName.toLowerCase().includes(keyword)
        );
      });
    },
  },
  methods: {
    backClick() {
      uni.navigateBack();
    },
    // 搜索会话
    searchChat() {
      console.log("搜索会话:", this.keyword);
    },

    // 进入会话详情
    goChatDetail(courseId) {
      uni.navigateTo({
        url: `/pages/chat/detail?courseId=${courseId}`,
      });
    },
  },
};
</script>

<style lang="scss">
.chat-list {
}
.my-card-info-cover {
  margin-right: 10px;
}
.extra-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.last-time {
  font-size: 24rpx;
  color: #909399;
  margin-bottom: 8rpx;
}
</style>    